<template>
  <div class="sylogins">
    <!-- 头部标题 -->
    <headMain @tipsfn="tipsfn" :tipshow="tipshow" :tipfnshow="tipfnshow" />
    <!-- 小标题 -->
    <div class="zbdbox">
      <img src="@/images/zbdbt.png" alt="" class="zbdboximg" />
      <div class="tool backzb" @click="back">
        <img src="@/images/back.png" alt="" class="normal" />
        <img src="@/images/backac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 实验介绍 -->
    <div class="desmain" v-if="desshow">
      <!-- 头部菜单 -->
      <div class="destask">
        <div
          class="destaskitem tool"
          v-for="item in tbdata"
          :key="item.id"
          @click="tbstep = item.id"
        >
          <img :src="item.src" alt="" class="normal" v-if="tbstep != item.id" />
          <img
            :src="item.srcac"
            alt=""
            class="active"
            v-if="tbstep != item.id"
          />
          <img :src="item.srcac" alt="" v-if="tbstep == item.id" />
        </div>
      </div>
      <!-- 主 -->
      <div class="desmainbox" v-if="tbstep == 1">
        <img src="@/images/syyldes.png" alt="" class="desimg" />
      </div>
      <div class="desmainbox" v-if="tbstep == 2">
        <img src="@/images/symddes.png" alt="" class="desimg" />
      </div>
      <div class="desmainboxd beautifulScroll" v-if="tbstep == 3">
        <span class="desmainboxbt"
          >采用依据《医用X射线诊断设备质量控制检测规范》(WS76-2020)的检测方法进行检测</span
        >
        <div class="xdesbox">
          <div class="xdesimgbox">
            <img src="@/images/xdesimg3.png" alt="" />
          </div>
          <div class="xdes">
            1.采用准直度检测板(简称检测板)和线束垂直度测试筒(简称
            检测筒)进行检测，如左图所示
          </div>
        </div>
        <div class="xdesbox">
          <div class="xdesimgbox">
            <img src="@/images/xdesimg2.png" alt="" />
          </div>
          <div class="xdes">
            2.将影像接收器设置成卧位曝光状态，DR、CR摄影机检测
            板放在影像接收器上，屏片摄影机放在装了胶片的暗盒上，
            然后将检测筒放在检测板上，检测板中心对准光野“+”字中
            心，检测筒的下部正中圆心与检测板的中心对准，摆放位置 如左图
          </div>
        </div>
        <div class="xdesbox">
          <div class="xdesimgbox">
            <img src="@/images/xdesimg1.png" alt="" />
          </div>
          <div class="xdes">
            3.调节焦点至检测板距离为100cm，球管调节至水平位置，
            用手动方式将光野中心与检测板上的中心对准;然后再调节
            光野边界与检测板上指示光野位置的长方框刻线重合，如重
            合不了，则记录实际光野位置，如左图中的亮区为光野
          </div>
        </div>
        <div class="xdesboxs">
          <div class="xdesimgbox">
            <img src="@/images/xdesimg4.png" alt="" />
          </div>
          <div class="xdes">
            4.对于DR和CR，直接在显示器上观察影像，或者打印胶片
            后观察影像，如右图，影像图中，光密度较大(较暗)的区域 为照射野
          </div>
        </div>
      </div>
      <div class="desmainboxd" v-if="tbstep == 4">
        <img src="@/images/xzzd.png" alt="" class="xzzddesimg" />
      </div>
      <!-- 开始按钮 -->
      <div class="startsy tool" @click="start">
        <img src="@/images/startsy.png" alt="" class="normal" />
        <img src="@/images/startsyac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 实验侧边任务栏 -->
    <div class="tasksy" v-if="!desshow">
      <div
        class="tasksyitem tool"
        v-for="item in taskdata"
        :key="item.id"
        @click="taskfn(item.id)"
      >
        <img :src="item.src" alt="" class="normal" v-if="step != item.id" />
        <img :src="item.srcac" alt="" class="active" v-if="step != item.id" />
        <img :src="item.srcac" alt="" v-if="step == item.id" />
      </div>
    </div>
    <!-- 实验右边物品栏 -->
    <div class="wptask" v-if="!desshow && step != 5 && step != 6">
      <div
        class="wptaskitem tool"
        v-for="item in wpdata"
        :key="item.id"
        @click="choicewp(item.id)"
      >
        <img
          :src="item.src"
          alt=""
          class="normal"
          v-if="wpid != item.id && wpidac != item.id"
        />
        <img
          :src="item.srcac"
          alt=""
          class="active"
          v-if="wpid != item.id && wpidac != item.id"
        />
        <img :src="item.srcts" alt="" v-if="wpid == item.id && wpidac == 0" />
        <img :src="item.srcac" alt="" v-if="wpidac == item.id" />
        <!-- <img
          src="@/images/ysy.png"
          alt=""
          v-if="ysy.includes(item.id)"
          class="wpsy"
        /> -->
      </div>
    </div>
    <!-- 前置提示 -->
    <!-- 新增提示介绍前 -->
    <div class="dktipafter" v-if="dktips && !desshow">
      <img src="@/images/gdbdts12s.png" alt="" class="gdbdts" />
      <div class="tool dkbottoms" @click="dkfn()">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 打开提示 -->
    <div class="dktips" v-if="dktipss && !desshow">
      <img src="@/images/dktip.png" alt="" class="dktipsimg" />
      <div class="tool dkbottom" @click="dkfns()">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 操作错误提示 -->
    <error-tip :ertips="ertips" v-if="ertips"></error-tip>
    <!-- 步骤提示 -->
    <bz-tips :bztips="bztips" v-if="bztips" />
    <!-- 视野灯 窗口 -->
    <div class="sydckbox" v-if="syshow">
      <img src="@/images/sydck.png" alt="" class="sydckboximg" />
      <div class="tool syqd" @click="syfn()">
        <img
          src="@/images/syd.png"
          alt=""
          class="normal tm"
          ref="syd"
          v-if="!syqdshow"
        />
        <img src="@/images/sydac.png" alt="" class="active" v-if="!syqdshow" />
        <img src="@/images/sydac.png" alt="" v-if="syqdshow" />
      </div>
      <div class="syqy" v-if="sydshow"></div>
    </div>
    <!-- 完成提示 -->
    <over-tips :overtips="overtips" v-if="overtips" />
    <!-- 调节SID -->
    <div class="sydckbox" v-if="step == 3">
      <img src="@/images/sidbg.png" alt="" class="sydckboximg" />
      <div class="tool sids" @click="sids()">
        <img
          src="@/images/sids.png"
          alt=""
          class="normal tm"
          ref="sids"
          v-if="!sidshow"
        />
        <img src="@/images/sidsac.png" alt="" class="active" v-if="!sidshow" />
        <img src="@/images/sidsac.png" alt="" v-if="sidshow" />
      </div>
      <div class="tool sidx" @click="sidx()">
        <img
          src="@/images/sidx.png"
          alt=""
          class="normal tm"
          ref="sidx"
          v-if="!sidshow"
        />
        <img src="@/images/sidxac.png" alt="" class="active" v-if="!sidshow" />
        <img src="@/images/sidxac.png" alt="" v-if="sidshow" />
      </div>
      <div
        class="sidnbmer"
        ref="sidnber"
        :style="{ bottom: (bnumber + 2) * 0.00521 + 'rem' }"
      >
        <img src="@/images/sidsz.png" alt="" />
        <span>{{ bnumber / 3 }}</span>
      </div>
      <div class="tool sidqd" @click="sidyz()">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 场景 -->
    <seen
      :step="step"
      :myshow="myshow"
      ref="seen"
      :loading="loading"
      @clickItem="clickItem"
      @myshowfn="myshowfn"
    />

    <!-- 漫游控制按钮 -->
    <div class="errordf tool" @click="myfn" v-show="step > 1">
      <img src="@/images/my.png" alt="" class="normal" />
      <img src="@/images/myac.png" alt="" class="active" />
    </div>
    <!-- 防止物品背景-->
    <div class="fzwpbox" v-if="step == 2">
      <img src="@/images/fzwpbg.png" alt="" class="fzwpboximg" />
      <img src="@/images/zzdbz.png" alt="" class="zzdbz" v-show="zzdbz" />
      <img src="@/images/cztz.png" alt="" class="cztz" v-show="cztz" />
      <div class="syqys"></div>
    </div>
    <!-- 调整视野窗位置 -->
    <div class="tzsycbox" v-if="step == 4">
      <img src="@/images/sycbg.png" alt="" class="tzsycboximg" />

      <div class="syqysdbox">
        <div
          class="syqysd"
          :style="{
            width: widthpx * 0.00521 + 'rem',
            height: heightpx * 0.00521 + 'rem'
          }"
        ></div>
      </div>
      <div class="syzqwz"></div>
      <div class="tool tjbox" @click="gj()">
        <img src="@/images/tj.png" alt="" class="normal" />
        <img src="@/images/tjac.png" alt="" class="active" />
      </div>
      <div class="tool tjjbox" @click="gjj()">
        <img src="@/images/tjj.png" alt="" class="normal" />
        <img src="@/images/tjjac.png" alt="" class="active" />
      </div>
      <div class="tool ctjbox" @click="kj()">
        <img src="@/images/tj.png" alt="" class="normal" />
        <img src="@/images/tjac.png" alt="" class="active" />
      </div>
      <div class="tool ctjjbox" @click="kjj()">
        <img src="@/images/tjj.png" alt="" class="normal" />
        <img src="@/images/tjjac.png" alt="" class="active" />
      </div>
      <div class="tool sidqd" @click="sycqd()">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
      </div>
      <img
        src="@/images/tzz.png"
        alt=""
        class="tzz"
        :style="{ transform: 'rotate(' + rotateds + 'deg)' }"
      />
      <img
        src="@/images/tzzs.png"
        alt=""
        class="tzzs"
        :style="{ transform: 'rotate(' + rotatedss + 'deg)' }"
      />
    </div>
    <!-- 曝光动画 -->

    <!-- 工作站ui -->
    <div class="gzzui" v-if="gzzshow">
      <img src="@/images/gzzui.png" alt="" class="gzzuiimg" />
      <div class="gdybox">
        <div class="jiana tm" ref="dyj" @click="dyj()">
          <img src="@/images/jiana.png" alt="" />
        </div>
        <div class="gdyput">
          <span>{{ gdy }}</span>
          <span>kV</span>
        </div>
        <div class="jiana tm" ref="dyjj" @click="dyjj()">
          <img src="@/images/jiaa.png" alt="" />
        </div>
      </div>
      <div class="gdyboxs gdybox">
        <div class="jiana tm" ref="dlj" @click="dlj()">
          <img src="@/images/jiana.png" alt="" />
        </div>
        <div class="gdyput">
          <span>{{ gdl }}</span>
          <span>mAs</span>
        </div>
        <div class="jiana tm" ref="dljj" @click="dljj()">
          <img src="@/images/jiaa.png" alt="" />
        </div>
      </div>
      <div class="gzuiqd tool" ref="gzuiqd" @click="gzqda">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
      </div>
      <!-- 曝光之后的图像展示 -->
      <div
        class="bgtxbox"
        v-if="bgtshow"
        @click=";(bgerboxshow = true), (gzzshow = false), (bztips = '')"
      >
        <!-- <img src="@/images/bgtxboximg.png" alt="" /> -->
        <img src="@/images/ddbjjbj.png" alt="" />
      </div>
    </div>
    <!-- 曝光框 -->
    <div class="bgkbox" v-if="bgshow">
      <div class="bgdhbox">
        <!-- changj -->
        <bg-dh ref="bgdh" @clickItem="clickItem" />
      </div>
      <div class="bgan tool" @click="zbbg" v-if="ksbgshows">
        <img src="@/images/zbbg.png" alt="" class="normal" />
        <img src="@/images/zbbgac.png" alt="" class="active" />
      </div>
      <div class="bgan tool" v-if="ksbgshow" @click="bgdhbf">
        <img src="@/images/bgl.png" alt="" class="normal" />
        <img src="@/images/bglac.png" alt="" class="active" />
      </div>
      <div class="bgan" v-if="bgdjs3">
        <img src="@/images/3.png" alt="" />
      </div>
      <div class="bgan" v-if="bgdjs2">
        <img src="@/images/2.png" alt="" />
      </div>
      <div class="bgan" v-if="bgdjs1">
        <img src="@/images/1.png" alt="" />
      </div>
    </div>
    <!-- 曝光二次展示框 -->
    <div class="bgerbox" v-if="bgerboxshow">
      <div class="bgtimgbox">
        <img src="@/images/xtp2.png" alt="" />
      </div>
      <div class="bgtdes">
        当检测板上中心小圆直径为检测筒高度的 0.05 倍,大圆 直径为其 0.10
        倍时，检测筒上表面中心钢珠的影像落 在小圆影像内时，垂直度偏差小于
        1.5°，落在大圆影像 内时，垂直度偏差小于 3°
        <el-button
          type="primary"
          class="bgerfn"
          @click=";(jcjldxboxshow = true), (bgerboxshow = false)"
          >确 定</el-button
        >
      </div>
    </div>
    <!-- 检查记录单 -->
    <div class="jcjldxbox" v-if="jcjldxboxshow">
      <img src="@/images/xjlc.png" alt="" />
      <el-button
        type="primary"
        class="bgerfns"
        @click=";(ztlcbox = true), (jcjldxboxshow = false)"
        >确 定</el-button
      >
    </div>
    <!-- 整体流程图 -->
    <div class="ztlcbox" v-if="ztlcbox">
      <img src="@/images/xzdesimg.png" alt="" class="xzdesimg" />
      <el-button type="primary" class="bgerfns" @click="back">确 定</el-button>
    </div>
    <!-- 放置完成提示 -->
    <y-wctip :wctips="wctips" v-if="wctips" />
  </div>
</template>

<script>
import Seen from '@/view/seen.vue'
import BzTips from './bzTips.vue'
import ErrorTip from './errorTip.vue'
import headMain from './headMain.vue'
import OverTips from './overTips.vue'
import BgDh from './bgDh.vue'
import YWctip from './yWctip.vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    headMain,
    ErrorTip,
    BzTips,
    OverTips,
    Seen,
    BgDh,
    YWctip
  },
  data() {
    //这里存放数据
    return {
      wctips: '',
      bgdjs3: false,
      bgdjs2: false,
      bgdjs1: false,
      ksbgshow: false,
      ksbgshows: true,
      gzzshow: false,
      gdy: 0,
      gdl: 0,
      widthpx: 337,
      heightpx: 280,
      rotatedss: 0,
      bgshow: false,
      step: 0,
      steps: 0,
      rotateds: 0,
      wpid: 0,
      wpidac: 0,
      bztips: '',
      zzdbz: false,
      cztz: false,
      tipshow: false,
      tipfnshow: false,
      desshow: true,
      dktips: false,
      syqdshow: false,
      bnumber: 0,
      sidshow: false,
      syshow: false,
      sydshow: false,
      myshow: false,
      loading: false,
      dktipss: false,
      bgtshow: false,
      bgerboxshow: false,
      jcjldxboxshow: false,
      ztlcbox: false,
      tbstep: 1,
      ertips: '',
      overtips: '',
      ysy: [],
      tbdata: [
        {
          id: 1,
          src: require('@/images/syyl.png'),
          srcac: require('@/images/syylac.png')
        },
        {
          id: 2,
          src: require('@/images/symd.png'),
          srcac: require('@/images/symdac.png')
        },
        {
          id: 3,
          src: require('@/images/jcff.png'),
          srcac: require('@/images/jcffac.png')
        }
        // {
        //   id: 4,
        //   src: require('@/images/sylc.png'),
        //   srcac: require('@/images/sylcac.png')
        // }
      ],
      taskdata: [
        {
          id: 1,
          src: require('@/images/dksyd.png'),
          srcac: require('@/images/dksydac.png')
        },
        {
          id: 2,
          src: require('@/images/fzwp.png'),
          srcac: require('@/images/fzwpac.png')
        },
        {
          id: 3,
          src: require('@/images/tjsid.png'),
          srcac: require('@/images/tjsidac.png')
        },
        {
          id: 4,
          src: require('@/images/tjsyc.png'),
          srcac: require('@/images/tjsycac.png')
        },
        {
          id: 5,
          src: require('@/images/bg.png'),
          srcac: require('@/images/bgac.png')
        },
        {
          id: 6,
          src: require('@/images/gcbjl.png'),
          srcac: require('@/images/gcbjlac.png')
        }
      ],
      wpdata: [
        {
          id: 1,
          src: require('@/images/wp1.png'),
          srcac: require('@/images/wp1ac.png'),
          srcts: require('@/images/wp1ts.png')
        },
        {
          id: 2,
          src: require('@/images/wp2.png'),
          srcac: require('@/images/wp2ac.png'),
          srcts: require('@/images/wp2ts.png')
        },
        {
          id: 3,
          src: require('@/images/wp3.png'),
          srcac: require('@/images/wp3ac.png'),
          srcts: require('@/images/wp3ts.png')
        },
        {
          id: 4,
          src: require('@/images/wp4.png'),
          srcac: require('@/images/wp4ac.png'),
          srcts: require('@/images/wp4ts.png')
        },
        {
          id: 5,
          src: require('@/images/wp5.png'),
          srcac: require('@/images/wp5ac.png'),
          srcts: require('@/images/wp5ts.png')
        },
        {
          id: 6,
          src: require('@/images/wp6.png'),
          srcac: require('@/images/wp6ac.png'),
          srcts: require('@/images/wp6ts.png')
        }
      ]
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    step: {
      handler(i) {
        console.log(i)
        // if (i != 2) {
        // }
        this.wpid = 0
        this.wpidac = 0
        this.bgtshow = false
        this.ztlcbox = false
        this.jcjldxboxshow = false
        this.bgerboxshow = false
        this.bztips = ''
        this.syqdshow = false
        this.ksbgshows = true
        this.sydshow = false
        this.syshow = false
        this.sidshow = false
        this.zzdbz = false
        this.cztz = false
        this.bgshow = false
        this.bgdjs3 = false
        this.bgdjs2 = false
        this.bgdjs1 = false
        this.ksbgshow = false
        this.gzzshow = false
        this.dktipss = false
        // 重置模型显示
        // this.$refs.seen.XianShuChuiZhiCeShiTong_1.visible = false
        // this.$refs.seen.ZhunZhiDuJianCeBan.visible = false
        if (i <= 2 && this.$refs.seen) {
          this.$refs.seen.ZhunZhiDuJianCeBan.visible = false
          this.$refs.seen.XianShuChuiZhiCeShiTong_1.visible = false
          console.log('执行了')
        }
        // 重置显示角度除非制定
        if (this.$refs.seen) {
          this.$refs.seen.move(
            [-1.696, 1.369, -3.11],
            [-175.59 / 180, 4.87 / 180, 179.62 / 180]
          )
        }
        // 如果=1 默认视野等全部开启
        if (i == 1 && this.$refs.seen) {
          this.$refs.seen.planeTop.visible = false
          this.$refs.seen.cylinder.visible = false
          this.$refs.seen.planeBottom.visible = false
        }
        // 如果大于1 默认视野等全部开启
        if (i >= 2) {
          this.$refs.seen.planeTop.visible = true
          this.$refs.seen.cylinder.visible = true
          this.$refs.seen.planeBottom.visible = true
        }
        if (i > 2) {
          this.$refs.seen.ZhunZhiDuJianCeBan.visible = true
          this.$refs.seen.XianShuChuiZhiCeShiTong_1.visible = true
        }
        if (i == 1) {
          // this.bztips = '点击打开视野灯'
          this.dktips = true
        }
        if (i == 2) {
          console.log('走了这个条件')
          this.$nextTick(() => {
            this.bztips = '点击物品栏中的准直度检测板，将其放置照射野中心'
          })
          // this.bztips = '点击物品栏中的准直度检测板，将其放置照射野中心'
          this.wpid = 3
          this.steps = 2.1
          this.ysy = []
        }
        if (i == 3) {
          this.bztips = '点击X线球管上下按钮，调整SID值为100CM'
          // this.$refs.seen.animate()
        }
        if (i == 4) {
          this.bztips =
            '通过旋钮调整光野边界与检测板上指示光野位置的长方框刻线重合'
        }
        if (i == 5) {
          this.$refs.seen.move(
            [-0.321, 1.457, -9.161],
            [-169.43 / 180, 5.44 / 180, 178.99 / 180]
          )
          this.bztips = '点击电脑设置曝光参数'
          this.$refs.seen.twinklePoint(-0.26, 1.6, -7.56)
        }
        if (i == 6) {
          this.gzzshow = true
          this.bgtshow = true
          if (this.$refs.dyj) {
            this.$refs.dyj.classList.remove('tm')
          }
          if (this.$refs.dyjj) {
            this.$refs.dyjj.classList.remove('tm')
          }
          if (this.$refs.dlj) {
            this.$refs.dlj.classList.remove('tm')
          }
          if (this.$refs.dljj) {
            this.$refs.dljj.classList.remove('tm')
          }

          this.bztips = '点击图像，观察检测筒上下两钢珠影像间的位置'
        }
      },
      immediate: true,
      deep: true
    },
    steps: {
      handler(i) {
        console.log(i)
        // if (i != 2) {
        // }
        this.bztips = ''
        this.syqdshow = false
        this.sydshow = false
        this.syshow = false
        this.sidshow = false
        this.bgtshow = false
        if (i == 2.2) {
          this.bztips =
            '点击物品栏中的线束垂直度测试筒，将其置于准直度检测板中心'
        }
      },
      immediate: true,
      deep: true
    },
    ertips(val) {
      if (val != '') {
        const timer = setTimeout(() => {
          this.ertips = ''

          clearTimeout(timer)
        }, 1000)
      }
    },
    wctips(val) {
      if (val != '') {
        const timer = setTimeout(() => {
          this.wctips = ''

          clearTimeout(timer)
        }, 1000)
      }
    },
    overtips(val) {
      if (val != '') {
        const timer = setTimeout(() => {
          this.overtips = ''
          if (this.step == 3) {
            this.step = 4
          }
          clearTimeout(timer)
        }, 1000)
      }
    }
  },
  //方法集合
  methods: {
    dkfn() {
      this.dktips = false
      this.dktipss = true
    },
    dkfns() {
      this.bztips = '点击打开视野灯'
      this.dktips = false
      this.syshow = true
      this.dktipss = false
    },
    choicewp(id) {
      console.log('选择的物品id', id)

      const flag = this.ysy.includes(id)
      if (flag) {
        this.wctips = '物品已经放置，请根据提示重新选择。'
      }
      if (!flag && this.wpidac == 0) {
        let wpname = [
          '高对比度分辨率测试卡',
          '低对比度分辨力检测模体',
          '准直度检测板',
          '线束垂直度测试筒',
          '平板探测器',
          '1.0mm铜滤过板'
        ]
        if (this.step != 2) {
          this.ertips = '请根据当前提示操作'
        }
        if (this.wpid != id && this.wpid != 0) {
          console.log('id', id)
          this.ertips = '请点击选择' + wpname[this.wpid - 1]
        }
        if (this.wpid == id) {
          if (this.wpid == 3) {
            this.overtips = '准直度检测板已拿起'
            // this.wpid = 0
            this.wpidac = 3
            this.$refs.seen.twinklePoint(-0.86, 0.96, 0.2)
          }
          if (this.wpid == 4) {
            this.overtips = '线束垂直度测试筒已拿起'
            this.wpidac = 4
            this.$refs.seen.twinklePoint(-0.86, 0.96, 0.2)
          }
        }
      }
    },
    start() {
      this.tipshow = true
      this.tipfnshow = true
      this.desshow = false
    },
    tipsfn(i) {
      this.tipshow = i
      if (i == false && this.step == 0) {
        // console.log('执行', i)
        this.dktips = true
        this.step = 1
      }
    },
    back() {
      this.$router.push({
        name: 'index'
      })
    },
    taskfn(id) {
      if (this.dktips == false) {
        this.step = id
      } else {
        this.ertips = '请根据当前提示操作'
      }
    },
    syfn() {
      this.$refs.syd.classList.remove('tm')
      this.$refs.seen.planeTop.visible = true
      this.$refs.seen.cylinder.visible = true
      this.$refs.seen.planeBottom.visible = true
      // this.$refs.seen.getLine()
      this.syqdshow = true
      this.overtips = '视野灯已开启'
      this.sydshow = true
      const timer = setTimeout(() => {
        this.step = 2
        // this.$nextTick(() => {
        //   this.bztips = '点击物品栏中的准直度检测板，将其放置照射野中心'
        // })
        clearTimeout(timer)
      }, 1000)
    },
    sidx() {
      if (this.sidshow == false) {
        this.sidshow = true
        this.$refs.sidx.classList.remove('tm')
        this.$refs.sids.classList.remove('tm')
      }

      if (this.bnumber > 0) {
        this.bnumber = this.bnumber - 30
      }
    },
    sids() {
      if (this.bnumber <= 420) {
        this.bnumber = this.bnumber + 30
      }
      if (this.sidshow == false) {
        this.sidshow = true
        this.$refs.sidx.classList.remove('tm')
        this.$refs.sids.classList.remove('tm')
      }
    },
    sidyz() {
      if (this.bnumber / 3 == 100) {
        this.overtips = 'SID值已调完成'
      } else {
        this.ertips = '请将SID值调整至100CM'
      }
    },
    // 是否开启漫游
    myfn() {
      this.myshow = !this.myshow
      console.log('开启漫游或者关闭漫游', this.myshow)
    },
    clickItem(name) {
      // console.log('动画播放完成', name)
      if (name == 'PingBanTanCeQi' && this.step == 2 && this.steps == 2.1) {
        this.overtips = '已将准直度检测板放置照射野中心'
        this.$refs.seen.ZhunZhiDuJianCeBan.visible = true
        this.zzdbz = true

        this.ysy.push(this.wpidac)
        this.wpid = 4
        this.wpidac = 0
        this.steps = 2.2
      }
      if (
        name == 'ZhunZhiDuJianCeBan' &&
        this.step == 2 &&
        this.steps == 2.2 &&
        this.wpidac == 4
      ) {
        this.overtips = '已将线束垂直度测试筒置于准直度检测板中心'
        this.cztz = true
        this.$refs.seen.XianShuChuiZhiCeShiTong_1.visible = true
        this.ysy.push(this.wpidac)
        console.log('动画播放完成22', name)
        const timer = setTimeout(() => {
          this.step = 3
          clearTimeout(timer)
        }, 2000)
      }
      if (name == 'All Animations' && this.step == 5) {
        this.step = 6
        this.bgtshow = true
      }
      if (name == 'ZhuoZI2_2' && this.step == 5) {
        this.gzzshow = true
        this.bztips = '设置管电压为50KV，毫安秒为10mAs'
      }
    },
    myshowfn(i) {
      this.myshow = i
    },
    gj() {
      if (this.heightpx <= 280) {
        this.heightpx += 10
        this.rotateds -= 10
        this.$refs.seen.theHeight += 0.1
      }
    },
    gjj() {
      if (this.heightpx >= 0) {
        if (this.heightpx >= 140) {
          this.rotateds += 10

          this.heightpx -= 10
        }

        this.$refs.seen.theHeight -= 0.1
      }
    },
    kj() {
      if (this.widthpx <= 330) {
        this.widthpx += 10
        this.rotatedss += 10
        this.$refs.seen.theWidth += 0.1
      }
    },
    kjj() {
      if (this.widthpx >= 0) {
        if (this.widthpx >= 197) {
          this.rotatedss -= 10
          this.widthpx -= 10
        }

        this.$refs.seen.theWidth -= 0.1
      }
    },
    sycqd() {
      let flag1 = null
      let flag2 = null
      console.log('现在', this.heightpx, this.widthpx)
      if (this.heightpx <= 210 && this.heightpx >= 200) {
        flag1 = true
      }
      if (this.widthpx <= 277 && this.widthpx >= 267) {
        flag2 = true
      }
      if (flag1 && flag2) {
        this.overtips = '已将视野调整至合适范围'
        const timer = setTimeout(() => {
          this.step = 5
          clearTimeout(timer)
        }, 2000)
      } else {
        this.ertips = '请将视野窗调整至正确范围'
      }
    },
    dyj() {
      if (this.$refs.dyj.classList.contains('tm')) {
        this.$refs.dyj.classList.remove('tm')
        this.$refs.dyjj.classList.remove('tm')
        this.$refs.dlj.classList.remove('tm')
        this.$refs.dljj.classList.remove('tm')
        this.$refs.gzuiqd.classList.add('fd')
      }
      if (this.gdy > 0 && this.bztips == '设置管电压为50KV，毫安秒为10mAs') {
        this.gdy -= 10
      }
    },
    dyjj() {
      if (this.$refs.dyj.classList.contains('tm')) {
        this.$refs.dyj.classList.remove('tm')
        this.$refs.dyjj.classList.remove('tm')
        this.$refs.dlj.classList.remove('tm')
        this.$refs.dljj.classList.remove('tm')
        this.$refs.gzuiqd.classList.add('fd')
      }
      if (this.gdy < 90 && this.bztips == '设置管电压为50KV，毫安秒为10mAs') {
        this.gdy += 10
      }
    },
    dlj() {
      if (this.$refs.dyj.classList.contains('tm')) {
        this.$refs.dyj.classList.remove('tm')
        this.$refs.dyjj.classList.remove('tm')
        this.$refs.dlj.classList.remove('tm')
        this.$refs.dljj.classList.remove('tm')
        this.$refs.gzuiqd.classList.add('fd')
      }
      if (this.gdl > 0 && this.bztips == '设置管电压为50KV，毫安秒为10mAs') {
        this.gdl -= 1
      }
    },
    dljj() {
      if (this.$refs.dyj.classList.contains('tm')) {
        this.$refs.dyj.classList.remove('tm')
        this.$refs.dyjj.classList.remove('tm')
        this.$refs.dlj.classList.remove('tm')
        this.$refs.dljj.classList.remove('tm')
        this.$refs.gzuiqd.classList.add('fd')
      }
      if (this.gdl < 20 && this.bztips == '设置管电压为50KV，毫安秒为10mAs') {
        this.gdl += 1
      }
    },
    gzqda() {
      if (this.step == 5) {
        if ((this.gdl != 0 || this.gdt != 0) && !this.bgshow) {
          this.$refs.gzuiqd.classList.remove('fd')
          if (this.gdy == 50 && this.gdl == 10) {
            this.overtips = '参数已设置完成'
            const timer = setTimeout(() => {
              this.bztips = '请按曝光按钮'
              this.bgshow = true
              clearTimeout(timer)
            }, 2000)
          } else {
            this.ertips = '请将管电压设置为50KV，毫安秒10mAs'
          }
        }
      }
    },
    zbbg() {
      this.bgdjs3 = true
      this.ksbgshows = false
      const timer1 = setTimeout(() => {
        this.bgdjs1 = false
        this.bgdjs3 = false
        this.bgdjs2 = true

        clearTimeout(timer1)
      }, 1000)
      const timer2 = setTimeout(() => {
        this.bgdjs2 = false
        this.bgdjs3 = false
        this.bgdjs1 = true
        clearTimeout(timer2)
      }, 2000)
      const timer3 = setTimeout(() => {
        this.bgdjs1 = false
        this.bgdjs2 = false
        this.bgdjs3 = false
        this.ksbgshow = true
        clearTimeout(timer3)
      }, 3000)
    },
    bgdhbf() {
      this.$refs.bgdh.playAction('All Animations', 'All Animations')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style></style>
